<template>
	<!-- 情况通报 -->
	<div class="Notification">
		<div class = "tabTitle">
			<span>情况通报</span>
		</div>
		<div class="search">
			<div class = "searchLeft">
				<div style = "display: inline-block;margin-top:22px;">
					<span>通报标题：</span>
					<el-input v-model = "queryParam.title" placeholder = "请输入内容" style = "width:154px;margin-right:20px" clearable></el-input>
				</div>
				<div style = "display: inline-block; margin-top:22px;">
					<span>状态：</span>
					<el-select v-model = "queryParam.status" placeholder = "全部" style = "width:154px;margin-right:20px;height:36px" clearable>
						<el-option v-for = "(item, index) in statusOptions" :key = "index" :label = "item.label" :value = "item.value"></el-option>
					</el-select>
				</div>
				<div style="display: inline-block;margin-right:12px;margin-top:22px;">
					<span class = "demonstration">发布时间：</span>
                    <el-date-picker
                        placeholder = "开始日期"
                        style = "width:160px;margin-right:12px"
                        v-model = "queryParam.startLocalDate" 
                        :clearable = "true"
						value-format="yyyy-MM-dd"
						:picker-options="startPickerOptions"
                    ></el-date-picker>至
                    <el-date-picker
                        placeholder = "结束日期"
                        style = "width:160px;margin-left:12px"
                        v-model = "queryParam.endLocalDate"
                        :clearable = "true"
						value-format="yyyy-MM-dd"
						:picker-options="endPickerOptions"
                    ></el-date-picker>
				</div>
				<el-button type = "primary" style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;" @click = "query">查询</el-button>
				<el-button style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:22px;" @click = "resetQueryParam">重置</el-button>
			</div>
			<div style="margin-top:22px;">
				<el-button type="primary" style = "width:80px;margin-left: 12px;padding:0px;height:36px" v-if = "role === 'manage' && permissionBycode.includes(this.code + '_manage-cj')" icon="el-icon-plus"  @click="create">创建</el-button>
				<UrgingAll @urgall = "urgAll" v-if = "role === 'manage' && permissionBycode.includes(this.code + '_manage-cb')"/>
				<!-- <el-button type="warning" style = "width:80px;margin-left: 12px;padding:0px;height:36px"  @click="urgAll">一键催办</el-button> -->
			</div>
		</div>
		<div class="table_data">
			<tableComponent ref= "tableComponent" :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" @selection-change = "handleSelectChange" />
		</div>
		<div class="pagination_wrap">
			<el-pagination
				background
				@size-change = "handleSizeChange"
				@current-change = "handleCurrentChange"
				:page-sizes = "paginationPageSizes"
				layout = "total, prev, pager, next, sizes,jumper"
				:current-page.sync = "paginationParam.currentPage"
				:page-size = "paginationParam.pageSize"
				:total = "paginationParam.total"
				style = "font-weight:400;"
			></el-pagination>
		</div>
	</div>
	</div>
</template>
<script>
	import Urging from "../../../../components/Popup/Urging.vue";
	let _that;
	export default {
		components: {
			Urging,
			tableComponent : () => import('../../comonComponent/table'),
			UrgingAll : () => import('../../../../components/Popup/UrgingAll.vue'),
		},
		data() {
			return {
				// new
				code:'jdjb-rcjd-qktb',
				queryParam: {
					status: '',// 状态：0-待汇报、1-已完成、null或空-全部 （非必填）
					title: '', // 通报标题
					startLocalDate: '', // 举报查询开始时间（非必填，日期格式：)
					endLocalDate: '' // 举报查询结束时间（非必填，日期格式：)
				},
				// 分页配置参数
				paginationPageSizes: [10, 30, 50],
				paginationParam: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				// 状态的配置参数
				statusOptions: [
					{value: '', label: '全部'},
					{value: '0', label: '待汇报'},
					{value: '1', label: '已完成'}
				],
				//表格数据
				tableData: [
					{
						"completed": 1,
						"createdTime": "2020-08-06 14:32:11",
						"id": 1,
						"status": 0,
						"title": "关于开展反四风自查自纠工作的通知",
						"total": 8
					}
				],
				tableLabelInit: [
					{ type : 'selection', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
					{ type : 'index',label : '序号', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
					{ prop : 'title', label : '通报标题', minWidth: '800', fixed : false, render : false, align : 'center'},
					{ prop : 'completion', label : '完成进度', minWidth: '150 ', fixed : false, render : false, align : 'center',
					render : (h, params, data) => { 
							return h( 'span', { attrs : { style: 'color :' + ((Number(params.row.completed) / Number(params.row.total)) < 1 ? 'red' : '') }}, params.row.completed + '/' + params.row.total)
					}},
					{ prop : 'createdTime', label : '发布时间', minWidth: '220 ', fixed : false, render : false, align : 'center'},
					{ prop : 'remainingDays', label : '剩余天数', minWidth: '190', fixed : false, render : false, align : 'center',
					render : (h, params, data) => { 
						return h( 'span', { attrs : { style: 'color :' + (Number(params.row.remainingDays) <= 5 ? 'red' : '') }}, params.row.remainingDays)
					}},
					{ prop : 'status', label : '状态', minWidth: '220', fixed : false, render : false, align : 'center',
					render : (h, params, data) => { 
							return h( 'span', { attrs : { style: 'color :' + (params.row.status === '0' ? 'red' : '') }}, (params.row.status === '0' ? '待汇报' : params.row.status === '1' ? '已完成' : ''))
					}},

					{ prop : 'action', label : '操作', minWidth: '250', fixed : false, option: [],align : 'center',
						render : (h, params, data) => { 
							return h( 'span', {}, [ 
								h( "el-button", {class:'', props:{ size: 'mini' }, on : {
									click : () => {
										this.preview(params)
									}
								} }, '查看' ), 
								h( "el-button", {class:'', props:{ type: 'primary', size: 'mini' }, on : {
									click : () => {
										this.report(params)
									}
								} }, '汇报'),
								h( "el-button", {class:'', props:{ type: 'warning', size: 'mini' }, on : {
									click : () => {
										this.urg(params)
									}
								} }, '催办')
							])
						} 
					}

				],
				tableOption : {
					loading: true,
					stripe: false,
					highlightCurrentRow : false,
					border : true,
					height : 610,
					maxHeight : '',
					resizable: false,
					headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
					cellStyle: {height: '50px', padding: 0 }
				},
				tableSelection: [],
				startPickerOptions: {
					disabledDate(time) {
						return _that.queryParam.endLocalDate ? (time.getTime() > new Date(_that.queryParam.endLocalDate).getTime()) : ''
					}
				},
				endPickerOptions: {
					disabledDate(time) {
						return _that.queryParam.startLocalDate ? (time.getTime() < new Date(_that.queryParam.startLocalDate).getTime()) : ''
					}
				}
			};
		},
		computed: {
			permissionBycode(){
				return this.$store.getters['PortalManagement/getPermissionBycode'](this.code)
			},
			role() {
				if (this.permissionBycode.includes(this.code + '_manage')) {
					return 'manage'
				} else if (this.permissionBycode.includes(this.code + '_upload')) {
					return 'upload'
				} else {
					return ''
				}
			},
			tableLabel() {
				let labelOption = this.tableLabelInit.slice(0)
				if (this.role === 'upload') {
					labelOption[labelOption.length - 1].render = (h, params, data) => { 
						return h( 'span', {}, [ 
							h( "el-button", {style: {display: this.role === 'upload' && this.permissionBycode.includes(this.code + '_upload-xq') ? '' : 'none'}, class:'', props:{ size: 'mini' }, on : {
								click : () => {
									this.preview(params)
								}
							} }, '查看' ),
							h( "el-button", {style: {display: this.role === 'upload' && this.permissionBycode.includes(this.code + '_upload-hb') && params.row.status === '0' ? 'inline-block' : 'none'}, class:'', props:{ type: 'primary', size: 'mini' }, on : {
								click : () => {
									this.report(params)
								}
							} }, '汇报')
						])
					}
					if (!this.permissionBycode.includes(this.code + '_upload-hb') && !this.permissionBycode.includes(this.code + '_upload-xq')) {
						labelOption.splice(labelOption.length - 1 , 1)
					}
					labelOption.splice(0, 1)
					labelOption.splice(2, 2)
				} else if (this.role === 'manage') {
					labelOption[labelOption.length - 1].render = (h, params, data) => { 
						return h( 'span', {}, [ 
							h( "el-button", {style: {display: this.role === 'manage' && this.permissionBycode.includes(this.code + '_manage-xq') ? '' : 'none'}, class:'', attrs : {style: 'margin-right: 20px'}, props:{ size: 'mini'}, on : {
								click : () => {
									this.preview(params)
								}
							} }, '查看' ),
							h( "Urging", {style: {display: (Number(params.row.completed) / Number(params.row.total)) < 1 && this.role === 'manage' && this.permissionBycode.includes(this.code + '_manage-cb') ? 'inline-block' : 'none'}, class:'',  props:{type: 'warning', size: 'mini', clearOne: this.urg ,id: params.row.id}, on : {
								click : () => {
									this.urg(params)
								}
							} }, '催办'),
						])
					}
					if (!this.permissionBycode.includes(this.code + '_manage-xq') && !this.permissionBycode.includes(this.code + '_manage-cb')) {
						labelOption.splice(labelOption.length - 1 , 1)
					}
					labelOption.splice(5, 2)
				}
				return labelOption
			}
		},
		mounted() {
			_that = this
			// 初始化列表数据获取
			this.queryData()
		},
		methods: {
			// 情况通报的数据列表数据获取
			queryData() {
				this.tableOption.loading = true
				let data = {
					pageNum: this.paginationParam.pageNum.toString(),
					pageSize: this.paginationParam.pageSize.toString(),
					title :  this.queryParam.title,
					status : this.role === 'manage' ? '' : this.queryParam.status,
					startLocalDate: this.role === 'manage' ? this.queryParam.startLocalDate : '',
					endLocalDate: this.role === 'manage' ? this.queryParam.endLocalDate : ''
				}
				let request = this.role === 'manage' ? this.Api.getManageReportPage(data) : this.Api.getUploadPage(data)
				request.then((res) => {
					if (res.code === '0') {
						this.tableData = res.data.records
						this.paginationParam.total = res.data.total
					} else {
						this.tableData = []
						this.paginationParam.total = 0
					}
					this.tableOption.loading = false
				})
			},
			// 查询点击事件
			query() {
				this.queryData()	
			},
			// 分页pageSize 改变触发事件 
			handleSizeChange(val) {
				this.paginationParam.pageSize = val
				this.queryData()
			},
			// 分页currentPage 改变触发事件
			handleCurrentChange(val) {
				this.paginationParam.pageNum = val
				this.queryData()
			},
			// 搜索栏重置事件
			resetQueryParam() {
				Object.assign(this.$data.queryParam, this.$options.data().queryParam)
				this.queryData()
			},
			// 一键催办
			urgAll() {
				let urgIds = this.tableSelection.filter(item => { return Number(item.completed) / Number(item.total) < 1 }) || []
				if (urgIds.length === 0) {
					this.$message.warning('请选择正确的数据')
				} else {
					// this.$confirm('确定催办所选信息吗？', '一键催办', {
					// 	confirmButtonText: '确定',
					// 	cancelButtonText: '取消',
					// 	type: 'warning'
					// }).then(() => {
						urgIds = urgIds.map(item => {
							return {id: item.id}
						})
						this.doUrg(urgIds)
					// })
				}
			},
			// 催办
			urg(data) {
				console.log('催办')
				console.log(data)
				this.doUrg([{id:data}])
			},
			// 催办接口调用
			doUrg(data) {
				let datas ={
					ids: data
				}
				this.Api.doNotificationManageUrging(datas).then(res => {
					if(res.code === '0') {
						this.$message.success('催办成功')
					}
				})
			},
			// 新建
			create() {
				this.$router.push("/index/SuperviseAndReport/Notification/notificationCreat");//创建任务
			},
			handleSelectChange (selection) {
				this.tableSelection = selection.slice(0)
			},
			// 查看
			preview(params) {
				this.$router.push({ path: '/index/SuperviseAndReport/Notification/DetailContaner', query: {id: params.row.id, role: this.role, comeFrom: this.role === 'manage' ? 'NotificationTable' : 'ReportTable'}})
			},
			// 汇报
			report(params) {
				let data ={
					id: params.row.id
				}
				this.Api.doNotificationReportCheck(data).then(res => {
					if (res.code === '0') {
						this.$router.push({ path: "/index/SuperviseAndReport/Notification/NotificationReportCreat", query: {id: params.row.id, role: this.role}})
					} else {
						this.$message.warning(res.message)
					}
				})
				
			},
		}
	};
</script>
<style lang="less" scoped>
	.Notification {
		width: 100%;
		padding:20px 20px 10px 20px;
		margin-bottom: 20px;
		background: #fff; 
		.tabTitle {
			line-height: 28px;
			font-size: 20px;
			color: #333333;
			font-weight: 600;
			user-select:none;
		}
		.search {
			margin: 20px 0;
			width:100%;
			display: flex;
			/deep/ .el-input__inner {
			height: 36px;
			}
			/deep/.el-icon-date
			{
			line-height: 36px;
			position: absolute;
				left: 120px;
			}
			/deep/.el-icon-arrow-up{
			line-height: 36px;
			}
			.searchLeft {
				flex: 1;
			}
		}
		.table_data {
			flex: 1;
		}
		.pagination_wrap {
			display: flex;
			justify-content: flex-end;
			bottom: 0;
			right: 0;
			/deep/ .el-pagination {
			margin-top: 0;
			padding-top:20px;
			padding-bottom:20px;
			line-height: normal;
			}
		}
	}
</style>